<template>
  <div>


    <el-dialog title="坞修项目维护" :visible="dialogFlag" width="1300px" append-to-body :destroy-on-close="true"
      :close-on-click-modal="false" @close="cancel" custom-class="repairProject-dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <div class="grid-2">
          <el-form-item label-position="right" label="坞修项目(中文):" prop="projectCnName">
            <el-input v-model="form.projectCnName" placeholder="请输入（200字/字符以内）" maxlength="100" />
          </el-form-item>
          <el-form-item label-position="right" label="坞修项目(EN):" prop="projectEnName">
            <el-input v-model="form.projectEnName" placeholder="请输入（200字/字符以内）" maxlength="100" />
          </el-form-item>

          <el-form-item label-position="right" label="类型:" prop="dataType">
            <el-radio v-model="form.dataType" label="0">坞修项目</el-radio>
            <el-radio v-model="form.dataType" label="1">说明</el-radio>
          </el-form-item>
          <el-form-item v-if="!hasChild" label-position="right" label="是否最末级:" prop="isFinalLevel">
            <el-radio v-model="form.isFinalLevel" label="1">是</el-radio>
            <el-radio v-model="form.isFinalLevel" label="0">否</el-radio>
          </el-form-item>
          <div v-else></div>

          <el-form-item label-position="right" label="坞修[说明]暗提醒文字(中文):" prop="dockRemidingCn">
            <el-input v-model="form.dockRemidingCn" placeholder="请输入" maxlength="100" />
          </el-form-item>
          <el-form-item label-position="right" label="坞修[说明]暗提醒文字(EN):" prop="dockRemidingEn">
            <el-input v-model="form.dockRemidingEn" placeholder="请输入" maxlength="100" />
          </el-form-item>

          <el-form-item label-position="right" label="报价[备注]暗提醒文字(中文):" prop="quotationRemidingCn">
            <el-input v-model="form.quotationRemidingCn" placeholder="请输入" maxlength="100" />
          </el-form-item>
          <el-form-item label-position="right" label="报价[备注]暗提醒文字(EN):" prop="quotationRemidingEn">
            <el-input v-model="form.quotationRemidingEn" placeholder="请输入" maxlength="100" />
          </el-form-item>

          <el-form-item label-position="right" label="坞修[说明]显示数字软键盘" prop="isKeyboard">
            <el-radio v-model="form.isKeyboard" label="1">是</el-radio>
            <el-radio v-model="form.isKeyboard" label="0">否</el-radio>
          </el-form-item>

          <el-form-item label-position="right" label="报价[备注]显示数字软键盘" prop="isKeyboardP">
            <el-radio v-model="form.isKeyboardP" label="1">是</el-radio>
            <el-radio v-model="form.isKeyboardP" label="0">否</el-radio>
          </el-form-item>

          <el-form-item label-position="right" label="关联采购项目" prop="purchasingProjectId">
            <el-cascader v-model="purchasingProjectId" :options="resumeList" :props="{
              value: 'id',
              label: 'projectCnName',
            }" clearable @change="handleChange" style="width: 100%">
            </el-cascader>
          </el-form-item>
        </div>

        <!--
            <el-form-item

              label-position="right"
              label="排序:"
              prop="projectSort"
            >
              <el-input
                v-model="form.projectSort"
                placeholder="请输入1-9999正整数"
                type="number"
              />
            </el-form-item>
           -->

        <template v-if="form.dataType === '0' && form.isFinalLevel === '1'">
          <div class="grid-2">
            <el-form-item label-position="right" label="单位(中文):" prop="projectCnUnit">
              <el-input v-model="form.projectCnUnit" placeholder="请输入单位名称（100字/字符以内）" maxlength="100" />
            </el-form-item>
            <el-form-item label-position="right" label="单位(EN):" prop="projectEnUnit">
              <el-input v-model="form.projectEnUnit" placeholder="请输入单位名称（100字/字符以内）" maxlength="100" />
            </el-form-item>
            <el-form-item label-position="right" label="所需数量:" prop="requireCount">
              <el-input v-model="form.requireCount" placeholder="请输入数量" maxlength="100" />
            </el-form-item>
          </div>
          <h3 style="font-weight: bold">关联因素</h3>

          <el-form-item label-position="right" label="船舶类型:" prop="shipsTypeList">
            <el-checkbox-group v-model="form.shipsTypeList">
              <el-checkbox v-for="dict in dict.type['ships_type']" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <div class="grid-1">
            <el-form-item label-position="right" label="船龄:" prop="boatAgeMin">
              <el-input-number v-model="form.boatAgeMin" :controls="false" placeholder="最小"></el-input-number>
              <span>-</span>
              <el-input-number v-model="form.boatAgeMax" :controls="false" placeholder="最大"></el-input-number>
            </el-form-item>
          </div>

          <el-form-item label-position="right" label="特检年限:" prop="specialInspectionAgeList">
            <el-checkbox-group v-model="form.specialInspectionAgeList">
              <el-checkbox :key="dict.value" :label="dict.value" v-for="dict in dict.type['special_inspection_age']">{{
                dict.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label-position="right" label="船长（米）:" prop="">
            <el-radio-group v-model="boatTotalLength" @input="boatTotalLengthChange">
              <el-radio label="1">220米以上（含220米）</el-radio>
              <el-radio label="0">220米以下</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label-position="right" label="检查类型:" prop="inspectionType">
            <el-radio-group v-model="form.inspectionType">
              <el-radio :key="dict.value" :label="dict.value" v-for="dict in dict.type['inspection_type']">
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="membershipLevel" label="会员等级:" label-position="right">
            <el-radio v-model="form.membershipLevel" v-for="item in memberInfo" :key="item.memberCode"
              :label="item.memberCode">
              {{ item.memberName }}
            </el-radio>
          </el-form-item>

          <!-- *** -->
          <h3 style="font-weight: bold">说明列取值及计算逻辑</h3>

          <el-form-item label-position="right" label="请选择方式:" prop="">
            <el-radio-group v-model="form.repairCalculateBo.calculdateTypeRemark">
              <el-radio :key="dict.value" :label="dict.value" v-for="dict in dict.type['calculdate_type']">
                {{ dict.label }}
              </el-radio>
              <el-radio label=""> 无 </el-radio>
            </el-radio-group>
          </el-form-item>

          <template v-if="
            form.repairCalculateBo.calculdateTypeRemark === 'calculdate_type_1'
          ">
            <el-form-item label-position="right" label="请选择计算公式:" prop="">
              <div class="flexsc">
                <div class="flexsc">
                  <el-popover placement="top-start" trigger="click" :width="800">
                    <div slot="reference" class="operator">说明</div>

                    <el-input class="input" placeholder="输入关键词过滤" prefix-icon="el-icon-search" v-model="treeFilter"
                      size="mini" clearable></el-input>
                    <vl-tree ref="tree" :data="selectTreeData" :props="{
                      value: 'repairProjectId',
                      label: 'projectNameCn',
                      children: 'repairProjectWebVoList',
                    }" :filter-method="filterMethod" @node-click="
                    (data, node, e) =>
                      nodeClickFormula(
                        data,
                        node,
                        e,
                        'remark',
                        'formulaListRemark'
                      )
                  " />
                  </el-popover>
                </div>

                <div class="flexsc">
                  <el-popover placement="top-start" trigger="click" :width="800">
                    <div slot="reference" class="operator">数量</div>

                    <el-input class="input" placeholder="输入关键词过滤" prefix-icon="el-icon-search" v-model="treeFilter"
                      size="mini" clearable></el-input>
                    <vl-tree ref="tree" :data="selectTreeData" :props="{
                      value: 'repairProjectId',
                      label: 'projectNameCn',
                      children: 'repairProjectWebVoList',
                    }" :filter-method="filterMethod" @node-click="
                    (data, node, e) =>
                      nodeClickFormula(
                        data,
                        node,
                        e,
                        'count',
                        'formulaListRemark'
                      )
                  " />
                  </el-popover>
                </div>

                <div class="operator" v-for="(item, index) in operatorList" :key="index"
                  @click="selectOperatorRemark(item)">
                  {{ item }}
                </div>

                <div class="operator back" @click="formulaListRemark.pop()" title="退格">
                  <img src="@/assets/images/back.png" alt="" height="20" />
                </div>
              </div>

              <div class="formula_res flexsc">
                <div class="item" v-for="(item, index) in formulaListRemark" :key="index">
                  {{ item.label }}
                </div>
              </div>
            </el-form-item>
          </template>

          <!-- *** -->
          <h3 style="font-weight: bold">数量列取值及计算逻辑</h3>

          <el-form-item label-position="right" label="请选择方式:" prop="">
            <el-radio-group v-model="form.repairCalculateBo.calculdateTypeCount">
              <el-radio :key="dict.value" :label="dict.value" v-for="dict in dict.type['calculdate_type']">
                {{ dict.label }}
              </el-radio>
              <el-radio label=""> 无 </el-radio>
            </el-radio-group>
          </el-form-item>

          <template v-if="
            form.repairCalculateBo.calculdateTypeCount === 'calculdate_type_1'
          ">
            <el-form-item label-position="right" label="请选择计算公式:" prop="">
              <div class="flexsc">
                <div class="flexsc">
                  <el-popover placement="top-start" trigger="click" :width="800">
                    <div slot="reference" class="operator">说明</div>

                    <el-input class="input" placeholder="输入关键词过滤" prefix-icon="el-icon-search" v-model="treeFilter"
                      size="mini" clearable></el-input>
                    <vl-tree ref="tree" :data="selectTreeData" :props="{
                      value: 'repairProjectId',
                      label: 'projectNameCn',
                      children: 'repairProjectWebVoList',
                    }" :filter-method="filterMethod" @node-click="
                    (data, node, e) =>
                      nodeClickFormula(
                        data,
                        node,
                        e,
                        'remark',
                        'formulaListCount'
                      )
                  " />
                  </el-popover>
                </div>

                <div class="flexsc">
                  <el-popover placement="top-start" trigger="click" :width="800">
                    <div slot="reference" class="operator">数量</div>

                    <el-input class="input" placeholder="输入关键词过滤" prefix-icon="el-icon-search" v-model="treeFilter"
                      size="mini" clearable></el-input>
                    <vl-tree ref="tree" :data="selectTreeData" :props="{
                      value: 'repairProjectId',
                      label: 'projectNameCn',
                      children: 'repairProjectWebVoList',
                    }" :filter-method="filterMethod" @node-click="
                    (data, node, e) =>
                      nodeClickFormula(
                        data,
                        node,
                        e,
                        'count',
                        'formulaListCount'
                      )
                  " />
                  </el-popover>
                </div>

                <div class="operator" v-for="(item, index) in operatorList" :key="index"
                  @click="selectOperatorCount(item)">
                  {{ item }}
                </div>

                <div class="operator back" @click="formulaListCount.pop()" title="退格">
                  <img src="@/assets/images/back.png" alt="" height="20" />
                </div>
              </div>

              <div class="formula_res flexsc">
                <div class="item" v-for="(item, index) in formulaListCount" :key="index">
                  {{ item.label }}
                </div>
              </div>
            </el-form-item>
          </template>
        </template>
        <!-- *** -->

        <div style="display: flex;align-items: center; margin-bottom: 10px;">
          <h3 style="font-weight: bold;width: 80px;">提示配置 </h3>
          <el-button type="primary" style="margin-left: 0px;" @click="addShcwClassificationContentList">点击添加</el-button>
        </div>
        <div v-for="(items, indexs) in form.shcwClassificationContentList" :key="indexs + 'a'">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label-position="right" label-width="30px" prop="">
                <el-cascader v-model="items.valueList" @change="handleClassificationContentChange(indexs, $event)"
                  :options="options" style="width: 100%;" :props="{ multiple : true , emitPath : false}">
                  <template slot-scope="{ node, data }">
                    <!-- <span>{{ data.dictLabelCn }}/{{ data.dictLabelEn }}</span> -->
                    <span>{{ data.label }}</span>
                  </template>
                </el-cascader>
                <i @click="addList(indexs)" class="el-icon-circle-plus-outline"
                  style="color: #1890ff;float: right;font-size: 32px;cursor: pointer;margin-top: 25px;"></i>
              </el-form-item>
            </el-col>

            <el-col :span="18" v-for="(item, index) in items.list" :key="index + 'c'" style="float: right;">
              <el-col :span="22">
                <el-form-item label-position="right" label-width="60px" label="中:">
                  <el-input v-model="item.contentCn" placeholder="" />
                </el-form-item>
                <el-form-item label-position="right" label-width="60px" label="EN:">
                  <el-input v-model="item.contentEn" placeholder="" />
                </el-form-item>
              </el-col>

              <el-col :span="2">
                <i @click="deleteList(index, indexs)" class="el-icon-remove-outline"
                  style="color: #1890ff;float: right;font-size: 28px;cursor: pointer;margin-top: 29px;"></i>
              </el-col>
            </el-col>
          </el-row>
          <el-divider v-if="form.shcwClassificationContentList.length - 1 != indexs"></el-divider>
        </div>
        <div style="display: flex;align-items: center; margin-bottom: 10px;">
          <h3 style="font-weight: bold;width: 80px;">相关项目 </h3>
          <el-button type="primary" style="margin-left: 0px;" @click="addDockerProjectPlusList">点击添加</el-button>
        </div>
        <div v-for="(items, indexs) in form.dockerProjectPlusList" :key="indexs + 'b'">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label-position="right" label-width="30px" prop="">
                <el-cascader v-model="items.valueList" @change="handleDockerProjectPlusListChange(indexs, $event)"
                  :options="optionsPlus" :props="{ multiple : true , emitPath : false}" style="width: 100%;">
                  <template slot-scope="{ node, data }">
                    <!-- <span>{{ data.dictLabelCn }}/{{ data.dictLabelEn }}</span> -->
                    <span>{{ data.label }}</span>
                  </template>
                </el-cascader>
                <i @click="addDockerProjectPlusTitleList(indexs)" class="el-icon-circle-plus-outline"
                  style="color: #1890ff;float: right;font-size: 32px;cursor: pointer;margin-top: 25px;"></i>
              </el-form-item>
            </el-col>

            <el-col :span="18" v-for="(item, index) in items.list" style="float: right;">
              <el-row>


                <el-col :span="2">
                  <p style="font-weight: bold;" class="margin-top2">标题:</p>
                </el-col>
                <el-col :span="8">
                  <el-form-item label-position="right" label-width="45px" label="中:">
                    <el-input v-model="item.titleNameCn" placeholder="" />
                  </el-form-item>
                  <el-form-item label-position="right" label-width="45px" label="EN:">
                    <el-input v-model="item.titleNameEn" placeholder="" />
                  </el-form-item>

                </el-col>
                <el-col :span="5">

                  <el-form-item label-position="right" label-width="60px" label="单位:">
                    <el-input v-model="item.titleUnitCn" placeholder="" :rows="1" />
                  </el-form-item>
                  <el-form-item label-position="right" label-width="60px" label="单位:">
                    <el-input v-model="item.titleUnitEn" placeholder="" :rows="1" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">

                  <el-form-item label-position="right" label-width="60px" label="数量:" class="margin-top">
                    <el-input v-model="item.titleRequireCount" placeholder="" :rows="1" />
                  </el-form-item>
                </el-col>
                <el-col :span="2" style="width: 10%;margin-left: 3.2%">
                  <div class="margin-top3 flex">
                    <div class="add-tip" @click="addTitleTipVisible(indexs, index)">添加提示</div>
                  </div>
                </el-col>
                <el-col :span="2" style="margin-left: -2%">
                  <i @click="deleteDockerProjectPlusTitleList(indexs, index)" class="el-icon-remove-outline"
                    style="color: #1890ff;float: right;font-size: 28px;cursor: pointer;margin-top: 29px;"></i>

                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3" style="width: 12%;">
                  <div class="margin-top2 flex-start">
                    <i @click="addDockerProjectPlusContentList(indexs, index)" class="el-icon-circle-plus-outline"
                      style="color: #999;float: left;font-size: 32px;cursor: pointer;margin-top: 0px;margin-right: 17px;"></i>
                    <p style="font-weight: bold;" class="padding-0 margin-0">内容:</p>
                  </div>
                </el-col>
                <el-col :span="19" style="width: 88%;">
                  <el-col :span="24" v-for="(it, ind) in item.list" style="float: left;" :gutter="40">
                    <el-col :span="8" style="width: 33.5%;">
                      <el-form-item label-position="right" label-width="50px" label="中:">
                        <el-input v-model="it.contentCn" placeholder="" type="textarea" :rows="1" />
                      </el-form-item>
                      <el-form-item label-position="right" label-width="50px" label="EN:">
                        <el-input v-model="it.contentEn" placeholder="" type="textarea" :rows="1" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" style="width: 23.7%;">
                      <el-form-item label-position="right" label-width="60px" label="单位:">
                        <el-input v-model="it.contentUnitCn" placeholder="" :rows="1" />
                      </el-form-item>
                      <el-form-item label-position="right" label-width="60px" label="单位:">
                        <el-input v-model="it.contentUnitEn" placeholder="" :rows="1" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" style="width: 19%;">
                      <el-form-item label-position="right" label-width="60px" label="数量:" class="margin-top">
                        <el-input v-model="it.contentRequireCount" placeholder="" :rows="1" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2" style="width: 10%;margin-left: 4.5%">
                      <div class="margin-top3 flex">
                        <div class="add-tip" @click="addContentTipVisible(ind, index, indexs)">添加提示</div>
                      </div>
                    </el-col>
                    <el-col :span="2" style="margin-left: -0.6%">
                      <i @click="deleteDockerProjectPlusContentList(ind, index, indexs)" class="el-icon-remove-outline"
                        style="color: #999;float: right;font-size: 28px;cursor: pointer;margin-top: 29px;"></i>
                    </el-col>
                  </el-col>
                </el-col>
              </el-row>
            </el-col>


            <!-- <el-col :span="12">
              <el-row :span="24" v-for="(it, ind) in item.list" style="float: left;" :gutter="40">
                <el-col :span="20">
                  <el-form-item label-position="right" label-width="50px" label="中:">
                    <el-input v-model="it.contentCn" placeholder=""  type="textarea" :rows="1" />
                  </el-form-item>
                  <el-form-item label-position="right" label-width="50px" label="EN:">
                    <el-input v-model="it.contentEn" placeholder=""  type="textarea" :rows="1" />
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <i @click="deleteDockerProjectPlusContentList(ind, index, indexs)" class="el-icon-remove-outline"
                    style="color: #999;float: right;font-size: 28px;cursor: pointer;margin-top: 29px;"></i>
                </el-col>
              </el-row>
            </el-col> -->


          </el-row>
          <el-divider v-if="form.dockerProjectPlusList.length - 1 != indexs"></el-divider>
        </div>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <div>
          <el-button type="primary" @click="submitForm" :loading="submitLoading">
            确 定
          </el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="编辑提示" :visible.sync="addTipVisible" width="1300px" append-to-body :destroy-on-close="true">
      <div class="add-tip-content">
        <el-form ref="tipForm" :model="tipForm" label-width="120px">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label-position="right" label-width="30px" prop="">
                  <el-cascader v-model="tipForm.value" disabled :options="optionsPlus" style="width: 100%;">
                    <template slot-scope="{ node, data }">
                      <!-- <span>{{ data.dictLabelCn }}/{{ data.dictLabelEn }}</span> -->
                      <span>{{ data.label }}</span>
                    </template>
                  </el-cascader>
                  <i @click="addTipList" class="el-icon-circle-plus-outline"
                    style="color: #1890ff;float: right;font-size: 32px;cursor: pointer;margin-top: 25px;"></i>
                </el-form-item>
              </el-col>

              <el-col :span="18" v-for="(item, index) in tipForm.list" :key="index + 'c'" style="float: right;">
                <el-col :span="22">
                  <el-form-item label-position="right" label-width="60px" label="中:">
                    <el-input v-model="item.contentCn" placeholder="" />
                  </el-form-item>
                  <el-form-item label-position="right" label-width="60px" label="EN:">
                    <el-input v-model="item.contentEn" placeholder="" />
                  </el-form-item>
                </el-col>

                <el-col :span="2">
                  <i @click="deleteTipList(index)" class="el-icon-remove-outline"
                    style="color: #1890ff;float: right;font-size: 28px;cursor: pointer;margin-top: 29px;"></i>
                </el-col>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button type="primary" @click="submitTipForm">
            确 定
          </el-button>
          <el-button @click="addTipVisible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMemberInfo,
  addRepairProject,
  editRepairProject,
  getRepairProject,
  getRepairInfo,
  getChooseList,
  getChooseListPlus
} from "@/api/system/repairProject";
import { listPurchasingProject } from "@/api/system/purchasingProject";

export default {
  name: "add",
  dicts: [
    "ships_type",
    "special_inspection_age",
    "inspection_type",
    "calculdate_type",
  ],
  model: {
    prop: "modelvalue",
    event: "change",
  },
  props: {
    modelvalue: {
      type: Boolean,
      default: false,
    },
    projectParent: {
      type: Number,
      default: null,
    },
    dialogType: {
      type: String,
      default: "add",
    },
    editId: {
      type: Number,
      default: null,
    },
    hasChild: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value: [],
      options: [],
      optionsPlus: [],
      dialogFlag: this.modelvalue,

      // 表单参数
      form: {
        boatAgeMax: undefined,
        boatAgeMin: undefined,
        boatTotalLengthMax: undefined,
        boatTotalLengthMin: undefined,
        membershipLevel: undefined,
        projectCnName: undefined,
        projectCnUnit: undefined,
        projectEnName: undefined,
        projectEnUnit: undefined,
        // projectSort: undefined,
        shipsTypeList: [],
        specialInspectionAgeList: [],
        dataType: "0",
        isFinalLevel: "0",
        repairCalculateBo: {
          calculdateFormulasRemark: "",
          calculdateTypeRemark: "",
          calculdateFormulasCount: "",
          calculdateTypeCount: "",
          // calculdateValueRemark: "",
          // calculdateValueRemarkName: "",
          // calculdateValueCount: "",
          // calculdateValueCountName: "",
        },
        shcwClassificationContentList: [],
        dockerProjectPlusList: []
      },
      // 表单校验
      rules: {
        requireCount: [
          {
            pattern: /^\d{0,8}(\.\d{1,2})?$/,
            message: "请输入0-8位整数，0-2位小数",
            trigger: "blur",
          },
        ],
        projectCnName: [
          { required: true, message: "请输入坞修项目名称", trigger: "blur" },
        ],
        projectEnName: [
          {
            required: true,
            message: "请输入坞修项目(EN)名称",
            trigger: "blur",
          },
        ],
        projectCnUnit: [
          { required: true, message: "请输入单位", trigger: "blur" },
        ],
        projectEnUnit: [
          { required: true, message: "请输入单位(EN)", trigger: "blur" },
        ],
      },
      boatTotalLength: "",
      memberInfo: [],
      selectTreeData: [],
      treeFilter: "",
      operatorList: [
        "+",
        "-",
        "*",
        "/",
        "(",
        ")",
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        ".",
      ],
      submitLoading: false,

      formulaListRemark: [], // 说明列 公式
      formulaListCount: [], // 数量列 公式

      // 采购列表数据
      resumeList: [],
      purchasingProjectId: null,
      addTipVisible: false,
      tipForm: {
        list: []
      },
    };
  },
  created() {
    this.form.projectParent = this.projectParent;
    this.getMemberInfo();
    this.getTree();
    this.getListPurchasingProject();
    this.getChooseList()
    // this.getChooseListPlus()
    if (this.dialogType === "edit") {
      this.getDetail();
    }
  },
  watch: {
    treeFilter(val) {
      this.$refs.tree.filter(val);
    },
    "form.repairCalculateBo.calculdateTypeRemark"(n) {
      if (!n) {
        this.form.repairCalculateBo.calculdateValueRemarkName = "";
        this.formulaListRemark = [];
      }
    },
    "form.repairCalculateBo.calculdateTypeCount"(n) {
      if (!n) {
        this.form.repairCalculateBo.calculdateValueCountName = "";
        this.formulaListCount = [];
      }
    },
  },
  methods: {
    // 添加 classificationContentList
    addShcwClassificationContentList() {
      if (!this.form.shcwClassificationContentList) {
        this.form.shcwClassificationContentList = [];
      }
      this.form.shcwClassificationContentList.push({
        valueList: [],
        list: [
          {
            contentCn: "",
            contentEn: ""
          }
        ]
      });
    },
    addDockerProjectPlusList() {
      if (!this.form.dockerProjectPlusList) {
        this.form.dockerProjectPlusList = [];
      }
      this.form.dockerProjectPlusList.push({
        valueList: [],
        valueNameList: [],
        valueNameEnList: [],
        list: [
          {
            titleNameEn: "",
            titleNameCn: "",
            titleUnitCn: "",
            titleUnitEn: "",
            titlePromptCn: "",
            titlePromptEn: "",
            titleRequireCount: "",
            list: [
              {
                contentCn: "",
                contentEn: "",
                contentUnitCn: "",
                contentUnitEn: "",
                contentRequireCount: "",
                contentPromptCn: "",
                contentPromptEn: "",
              }
            ]
          }
        ]
      });
    },
    getObjectByDictValue(tree, dictValue) {
      for (let i = 0; i < tree.length; i++) {
        const category = tree[i];
        for (let j = 0; j < category.children.length; j++) {
          const item = category.children[j];
          if (item.value === dictValue) {
            return item;
          }
        }
      }
      return null;
    },
    handleClassificationContentChange(index, value) {
      this.form.shcwClassificationContentList[index].valueList = value;
      const nameAry = [];
      const nameEnAry = [];
      value.forEach(v=>{
        for ( let o = 0; o < this.options.length; o++ ){
          if ( v == this.options[o].value ){
            nameAry.push(this.options[o].dictLabelCn)
            nameEnAry.push(this.options[o].dictLabelEn)
          } else {
            if ( this.options[o].children ){
              for (let c = 0; c < this.options[o].children.length; c++ ){
                if ( v == this.options[o].children[c].value ){
                  nameAry.push(this.options[o].children[c].dictLabelCn)
                  nameEnAry.push(this.options[o].children[c].dictLabelEn)
                }
              }
            }
          }
        }
      })
      this.form.shcwClassificationContentList[index].valueNameList = nameAry;
      this.form.shcwClassificationContentList[index].valueNameEnList = nameEnAry;
    },
    // 添加 classificationContentList
    addList(indexs) {
      if (!this.form.shcwClassificationContentList[indexs].list) {
        this.$set(this.form.shcwClassificationContentList[indexs], "list", [])
      }
      this.form.shcwClassificationContentList[indexs].list.push({
        contentCn: "",
        contentEn: ""
      })
    },
    // 添加提示列表
    addTipList() {
      this.tipForm.list.push({
        contentCn: "",
        contentEn: ""
      })
    },
    // 删除提示列表
    deleteTipList(index) {
      this.tipForm.list.splice(index, 1)
    },
    // 提交提示列表
    submitTipForm() {

      // this.tipForm.list = [
      //   {
      //     contentCn: "1",
      //     contentEn: "2"
      //   },
      //   {
      //     contentCn: "3",
      //     contentEn: "4"
      //   }
      // ]
      let obj={
        titlePromptCn:this.tipForm.list.map(item=>item.contentCn).join(','),
        titlePromptEn:this.tipForm.list.map(item=>item.contentEn).join(',')
      }
      if(this.tipForm.type==='title'){
        this.form.dockerProjectPlusList[this.tipForm.indexs].list[this.tipForm.index].titlePromptCn=obj.titlePromptCn
        this.form.dockerProjectPlusList[this.tipForm.indexs].list[this.tipForm.index].titlePromptEn=obj.titlePromptEn
      }else{
        this.form.dockerProjectPlusList[this.tipForm.indexs].list[this.tipForm.index].list[this.tipForm.ind].contentPromptCn=obj.titlePromptCn
        this.form.dockerProjectPlusList[this.tipForm.indexs].list[this.tipForm.index].list[this.tipForm.ind].contentPromptEn=obj.titlePromptEn
      }
      this.addTipVisible = false
      // this.$emit("submitTipForm", this.tipForm)
    },
    // 添加项目提示
    addContentTipVisible(ind, index, indexs) {
      this.$set(this.tipForm, 'value', this.form.dockerProjectPlusList[indexs].valueList)
      this.$set(this.tipForm, 'type', 'content')
      this.$set(this.tipForm, 'indexs', indexs)
      this.$set(this.tipForm, 'index', index)
      this.$set(this.tipForm, 'ind', ind)
      console.log(this.form.dockerProjectPlusList)
      const titlePromptCn = this.form.dockerProjectPlusList[indexs].list[index].list[ind].contentPromptCn || '';
      const titlePromptEn = this.form.dockerProjectPlusList[indexs].list[index].list[ind].contentPromptEn || '';
      // 如果两个字符串都为空，则返回空数组
      if (!titlePromptCn && !titlePromptEn) {
        this.tipForm.list = [];
      } else {
        // 将逗号分隔的字符串转换成数组
        const titlePromptCnArr = titlePromptCn.split(',').filter(item => item);
        const titlePromptEnArr = titlePromptEn.split(',').filter(item => item);

        // 转换成对象数组
        this.tipForm.list = titlePromptCnArr.map((item, index) => ({
          contentCn: item,
          contentEn: titlePromptEnArr[index] || ''
        }));
      }
      this.addTipVisible = true
    },
    // 添加标题提示
    addTitleTipVisible(indexs, index) {
      this.$set(this.tipForm, 'value', this.form.dockerProjectPlusList[indexs].valueList)
      this.$set(this.tipForm, 'type', 'title')
      this.$set(this.tipForm, 'indexs', indexs)
      this.$set(this.tipForm, 'index', index)
      
      const titlePromptCn = this.form.dockerProjectPlusList[indexs].list[index].titlePromptCn || '';
      const titlePromptEn = this.form.dockerProjectPlusList[indexs].list[index].titlePromptEn || '';
      // 如果两个字符串都为空，则返回空数组
      if (!titlePromptCn && !titlePromptEn) {
        this.tipForm.list = [];
      } else {
        // 将逗号分隔的字符串转换成数组
        const titlePromptCnArr = titlePromptCn.split(',').filter(item => item);
        const titlePromptEnArr = titlePromptEn.split(',').filter(item => item);

        // 转换成对象数组
        this.tipForm.list = titlePromptCnArr.map((item, index) => ({
          contentCn: item,
          contentEn: titlePromptEnArr[index] || ''
        }));
      }

      this.addTipVisible = true
    },
    // 删除 classificationContentList
    deleteList(index, indexs) {
      if (this.form.shcwClassificationContentList[indexs].list.length > 1) {
        this.form.shcwClassificationContentList[indexs].list.splice(index, 1)
      } else {
        this.form.shcwClassificationContentList.splice(indexs, 1)
      }
    },
    // 添加 dockerProjectPlusList
    handleDockerProjectPlusListChange(index, value) {
      this.form.dockerProjectPlusList[index].valueList = value;
      const nameAry = [];
      const nameEnAry = [];
      value.forEach(v=>{
        for ( let o = 0; o < this.options.length; o++ ){
          if ( v == this.options[o].value ){
            nameAry.push(this.options[o].dictLabelCn)
            nameEnAry.push(this.options[o].dictLabelEn)
          } else {
            if ( this.options[o].children ){
              for (let c = 0; c < this.options[o].children.length; c++ ){
                if ( v == this.options[o].children[c].value ){
                  nameAry.push(this.options[o].children[c].dictLabelCn)
                  nameEnAry.push(this.options[o].children[c].dictLabelEn)
                }
              }
            }
          }
        }
      })
      this.form.dockerProjectPlusList[index].valueNameList = nameAry;
      this.form.dockerProjectPlusList[index].valueNameEnList = nameEnAry;
    },
    // 添加 dockerProjectPlusList
    addDockerProjectPlusTitleList(indexs) {
      if (!this.form.dockerProjectPlusList[indexs].list) {
        this.$set(this.form.dockerProjectPlusList[indexs], "list", [])
      }
      this.form.dockerProjectPlusList[indexs].list.push({
        titleNameEn: "",
        titleNameCn: "",
        titleUnitCn: "",
        titleUnitEn: "",
        titleRequireCount: "",
        titlePromptCn: "",
        titlePromptEn: "",
        list: [
          {
            contentCn: "",
            contentEn: "",
            contentUnitCn: "",
            contentUnitEn: "",
            contentPromptCn: "",
            contentPromptEn: "",
            contentRequireCount: "",
          }
        ]
      })
    },
    // 删除 dockerProjectPlusList
    deleteDockerProjectPlusTitleList(index, indexs) {
      if (this.form.dockerProjectPlusList[indexs].list.length > 1) {
        this.form.dockerProjectPlusList[indexs].list.splice(index, 1)
      } else {
        this.form.dockerProjectPlusList.splice(indexs, 1)
      }
    },
    addDockerProjectPlusContentList(indexs, index) {
      if (!this.form.dockerProjectPlusList[indexs].list) {
        this.$set(this.form.dockerProjectPlusList[indexs], "list", [])
        if (!this.form.dockerProjectPlusList[indexs].list[index].list) {
          this.$set(this.form.dockerProjectPlusList[indexs].list[index], "list", [])
        }
      }
      this.form.dockerProjectPlusList[indexs].list[index].list.push({
        contentCn: "",
        contentEn: "",
        contentUnitCn: "",
        contentUnitEn: "",
        contentPromptCn: "",
        contentPromptEn: "",
        contentRequireCount: "",
      })
    },
    // 删除 dockerProjectPlusList
    deleteDockerProjectPlusContentList(ind, index, indexs) {
      if (this.form.dockerProjectPlusList[indexs].list[index].list.length > 1) {
        this.form.dockerProjectPlusList[indexs].list[index].list.splice(ind, 1)
      } else {
        this.form.dockerProjectPlusList[indexs].list.splice(index, 1)
        if (this.form.dockerProjectPlusList[indexs].list.length === 0) {
          this.form.dockerProjectPlusList.splice(indexs, 1)
        }
      }
    },

    /** 查询采购项目列表 */
    getListPurchasingProject() {
      listPurchasingProject({
        largeCategoryId: null,
        projectName: "",
        ignoreId: null,
      })
        .then((response) => {
          this.resumeList = this.handleTree(
            response.data,
            "id",
            "projectParent"
          );
          // console.log(this.resumeList);
        })
        .catch(() => { });
    },
    handleChange(value) {
      console.log(value);
      this.form.purchasingProjectId = value.length
        ? value[value.length - 1]
        : null;
    },
    getTree() {
      getRepairInfo().then(({ data }) => {
        this.selectTreeData = data;
      });
    },
    getChooseList() {
      getChooseList().then((data) => {
        // const result = [];
        // for (const key in data) {
        //   const node = {
        //     label: key,
        //     value: key,
        //     children: []
        //   };
        //   const subObj = data[key];
        //   for (const subKey in subObj) {
        //     node.children.push({
        //       label: subObj[subKey],
        //       value: subKey
        //     });
        //   }
        //   result.push(node);
        // }
        // this.options = result
        // console.log(this.options)

        const result = [];

        for (const key in data) {
          if (typeof data[key] === 'string') {
            result.push({
              label: key,
              value: data[key],
              dictLabelCn: key,
              dictLabelEn: key,
            })
          } else {
            const category = {
              label: key,
              children: []
            };
            const items = data[key];
            for (const item of items) {
              const child = {
                label: item.dictLabelCn || item.repairKeywordsCn,
                dictLabelCn: item.dictLabelCn || item.repairKeywordsCn,
                dictLabelEn: item.dictLabelEn || item.repairKeywordsEn,
                value: item.dictValue || item.id
              };
              category.children.push(child);
            }
            result.push(category);
          }
        }
        this.options = result;
        this.optionsPlus = result;
        // console.log(result);
        // this.selectTreeData = data;
      });
    },

    getChooseListPlus() {
      getChooseListPlus().then((data) => {
        const result = [];

        for (const key in data) {
          if (typeof data[key] === 'string') {
            result.push({
              label: key,
              value: data[key],
              dictLabelCn: key,
              dictLabelEn: key,
            })
          } else {
            const category = {
              label: key,
              children: []
            };
            const items = data[key];
            for (const item of items) {
              const child = {
                label: item.dictLabelCn || item.repairKeywordsCn,
                dictLabelCn: item.dictLabelCn || item.repairKeywordsCn,
                dictLabelEn: item.dictLabelEn || item.repairKeywordsEn,
                value: item.dictValue || item.id
              };
              category.children.push(child);
            }
            result.push(category);
          }
        }
        this.optionsPlus = result
        // console.log(result);
        // this.selectTreeData = data;
      });
    },

    // 详情
    getDetail() {
      getRepairProject(this.editId).then(({ data }) => {
        data.shipsTypeList = data.shipsTypeList || [];
        data.specialInspectionAgeList = data.specialInspectionAgeList || [];
        data.repairCalculateBo = data.repairCalculateBo || {
          calculdateFormulasRemark: "",
          calculdateTypeRemark: "",
          calculdateFormulasCount: "",
          calculdateTypeCount: "",
        };

        const calculdateFormulasRemarkJson =
          data.repairCalculateBo?.calculdateFormulasRemarkJson || [];
        calculdateFormulasRemarkJson.forEach((item) => {
          item.computeValue = 1;
        });
        this.formulaListRemark = calculdateFormulasRemarkJson;

        const calculdateFormulasCountJson =
          data.repairCalculateBo?.calculdateFormulasCountJson || [];
        calculdateFormulasCountJson.forEach((item) => {
          item.computeValue = 1;
        });
        this.formulaListCount = calculdateFormulasCountJson;

        if (data.boatAgeMax === null) {
          data.boatAgeMax = undefined;
        }

        if (data.boatAgeMin === null) {
          data.boatAgeMin = undefined;
        }

        if (
          data.boatTotalLengthMax === null &&
          data.boatTotalLengthMin === 220
        ) {
          this.boatTotalLength = "1";
        }
        if (
          data.boatTotalLengthMax === 220 &&
          data.boatTotalLengthMin === null
        ) {
          this.boatTotalLength = "0";
        }

        // 处理 dockerProjectPlusList 数据转树状结构
        if (data.dockerProjectPlusList && data.dockerProjectPlusList.length > 0) {
          const treeData = {};
          data.dockerProjectPlusList.forEach(item => {
            if (!treeData[item.value]) {
              treeData[item.value] = {
                valueList: item.valueList,
                valueNameList: item.valueNameList,
                valueNameEnList: item.valueNameEnList,
                list: []
              };
            }

            // 查找titleNameCn相同的项
            let titleItem = treeData[item.value].list.find(listItem =>
              listItem.titleNameCn === item.titleNameCn && listItem.titleNameEn === item.titleNameEn
            );

            if (!titleItem) {
              titleItem = {
                titleNameCn: item.titleNameCn,
                titleNameEn: item.titleNameEn,
                titleUnitCn: item.titleUnitCn,
                titleUnitEn: item.titleUnitEn,
                titlePromptCn: item.titlePromptCn,
                titlePromptEn: item.titlePromptEn,
                titleRequireCount: item.titleRequireCount,
                list: []
              };
              treeData[item.value].list.push(titleItem);
            }

            // 添加内容项到对应的标题下
            titleItem.list.push({
              contentCn: item.contentCn,
              contentEn: item.contentEn,
              contentUnitCn: item.contentUnitCn,
              contentUnitEn: item.contentUnitEn,
              contentPromptCn: item.contentPromptCn,
              contentPromptEn: item.contentPromptEn,
              contentRequireCount: item.contentRequireCount,
            });
          });

          data.dockerProjectPlusList = Object.values(treeData);
        } else {
          data.dockerProjectPlusList = [];
        }

        if (!data.shcwClassificationContentList) {
          data.shcwClassificationContentList = [];
        }

        this.form = data;
      });
    },

    // 取消按钮
    cancel() {
      this.$emit("change", false);
    },

    // 会员等级获取
    getMemberInfo() {
      getMemberInfo().then(({ data }) => {
        this.memberInfo = data;
      });
    },

    selectOperatorRemark(val) {
      this.formulaListRemark.push({
        label: val,
        value: `{${val}}`,
        computeValue: val,
      });
    },

    selectOperatorCount(val) {
      this.formulaListCount.push({
        label: val,
        value: `{${val}}`,
        computeValue: val,
      });
    },

    // 船长（米）
    boatTotalLengthChange(val) {
      // console.log(val, "====");
      if (val === "1") {
        this.form.boatTotalLengthMax = null;
        this.form.boatTotalLengthMin = 220;
      }
      if (val === "0") {
        this.form.boatTotalLengthMax = 220;
        this.form.boatTotalLengthMin = null;
      }
    },

    // 点击节点 公式
    nodeClickFormula(data, node, e, type, list) {
      // console.log(data, node, e, type);
      const obj = {
        count: "数量",
        remark: "说明",
      };
      this[list].push({
        label: `${data.projectName}[${obj[type]}]`,
        value: `{${data.repairProjectId}:${type}}`,
        computeValue: 1,
      });

      // console.log(this[list]);
    },
    // 筛选
    filterMethod(query, node) {
      return node.projectNameCn.includes(query);
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.form));

          // 处理 dockerProjectPlusList 数据平铺
          if (params.dockerProjectPlusList && params.dockerProjectPlusList.length > 0) {
            const flattenList = [];
            params.dockerProjectPlusList.forEach(item => {
              if (item.list && item.list.length > 0) {
                item.list.forEach(listItem => {
                  if (listItem.list && listItem.list.length > 0) {
                    listItem.list.forEach(contentItem => {
                      flattenList.push({
                        valueList: item.valueList,
                        valueNameList: item.valueNameList,
                        valueNameEnList: item.valueNameEnList,
                        titleNameCn: listItem.titleNameCn,
                        titleNameEn: listItem.titleNameEn,
                        titleUnitCn: listItem.titleUnitCn,
                        titleUnitEn: listItem.titleUnitEn,
                        titleRequireCount: listItem.titleRequireCount,
                        titlePromptCn: listItem.titlePromptCn,
                        titlePromptEn: listItem.titlePromptEn,
                        contentCn: contentItem.contentCn,
                        contentEn: contentItem.contentEn,
                        contentUnitCn: contentItem.contentUnitCn,
                        contentUnitEn: contentItem.contentUnitEn,
                        contentRequireCount: contentItem.contentRequireCount,
                        contentPromptCn: contentItem.contentPromptCn,
                        contentPromptEn: contentItem.contentPromptEn,
                        repairProjectId: params.id
                      });
                    });
                  }
                });
              }
            });
            params.dockerProjectPlusList = flattenList;
          }

          // 是最末级 && 配置公式计算
          // 说明
          if (
            params.isFinalLevel === "1" &&
            params.repairCalculateBo.calculdateTypeRemark ===
            "calculdate_type_1"
          ) {
            const str = this.formulaListRemark
              .map((item) => item.computeValue)
              .join("");
            try {
              eval(str);
            } catch (error) {
              this.$message.warning("计算公式有误，请修改后重试");
              return;
            }

            params.repairCalculateBo.calculdateFormulasRemark =
              this.formulaListRemark.map((item) => item.value).join("");
          } else if (
            params.isFinalLevel === "1" &&
            params.repairCalculateBo.calculdateTypeCount === "calculdate_type_1"
          ) {
            const str = this.formulaListCount
              .map((item) => item.computeValue)
              .join("");
            try {
              eval(str);
            } catch (error) {
              this.$message.warning("计算公式有误，请修改后重试");
              return;
            }

            params.repairCalculateBo.calculdateFormulasCount =
              this.formulaListCount.map((item) => item.value).join("");
          } else {
            delete params.repairCalculateBo;
          }
          this.submitLoading = true;
          if (this.form.id) {
            editRepairProject(params)
              .then((response) => {
                this.submitLoading = false;
                this.$modal.msgSuccess("操作成功");
                this.$emit("change", false);
                this.$emit("getList");
              })
              .catch(() => {
                this.submitLoading = false;
              });
          } else {
            addRepairProject(params)
              .then((response) => {
                this.submitLoading = false;
                this.$modal.msgSuccess("操作成功");
                this.$emit("change", false);
                this.$emit("getList");
              })
              .catch(() => {
                this.submitLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.vl-tree {
  margin-top: 10px;
}

::v-deep .vl-tree__expand-icon {
  margin-right: 15px;
}

.operator {
  display: inline-block;
  padding: 0 20px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
  margin-right: 5px;
  line-height: 30px;
  height: 30px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  margin-bottom: 3px;

  &:active {
    transform: translateY(1px);
  }
}

.el-input-number {
  width: 173px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}

.formula_res {
  gap: 5px;
  margin-top: 15px;

  .item {
    border-bottom: 1px solid #606266;
    min-width: 20px;
    display: grid;
    justify-content: center;
    line-height: 1;
    cursor: default;

    &:hover {
      color: #999;
    }
  }

}
</style>
<style>
.repairProject-dialog .el-divider--horizontal {
  margin: 0px 0 20px;
}

.margin-top {
  margin-top: 27px;
}

.margin-top2 {
  margin-top: 30px;
  padding-left: 20px;
}

.margin-top3 {
  margin-top: 30px;
}

.padding-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.margin-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.add-tip {
  background: rgb(24, 144, 255);
  color: #ffffff;
  width: 80px;
  height: 28px;
  border-radius: 4px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
</style>
